<template>
  <div>
    <a-row>
      <a-col :span="3">
        <a-tabs :default-active-key="'1'" tab-position="left" @change="onTabs">
          <a-tab-pane key="1" tab="考拉通信">
          </a-tab-pane>
          <a-tab-pane key="2" tab="南方电信">
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :offset="1" :span="20">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.id"
          :columns="trackColumns"
          :data="trackData"
        >
          <div slot="url" slot-scope="text">
            <audio :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
              您的浏览器不支持 audio 标签
            </audio>
          </div>
        </s-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { STable } from '@/components'
import { trackList } from '@/api/customer'
import col from '@/columns/customer'
const trackColumns = col.track

export default {
  props: {
    keys: {
      type: String,
      default: ''
    }
  },
  components: {
    STable
  },
  name: 'TrackInfo',
  data () {
    return {
      trackColumns,
      trackLoading: true,
      queryParam: {},
      customerId: '',
      trackData: parameters => {
        return trackList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  },
  created () {
    this.queryParam['filter[customer_id]'] = this.keys
    this.customerId = this.keys
  },
  methods: {
    onTabs (key) {
      this.queryParam['filter[type]'] = key
      this.queryParam['filter[customer_id]'] = this.keys
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
